
// document.documentElement.style.overflowX = 'hidden';

$(function () {
        $("#bs1 ul").click(function () {
            $('#bs1').removeClass('in')
        });

        $(window).click(function () {
            $('#bs1').removeClass('in')
        });
    $(window).scroll(function(){

        $("nav").each(function(){
            var top =$(this).offset().top;
            var windowtop=$(window).innerHeight();
            var scrollTop=$("body").scrollTop();
            if((scrollTop)>60){
                $(this).addClass("fixed");
            }else {
                $(this).removeClass("fixed");
            }

        });
    });
});
$(function () {
    $(".rg").click(function () {
        $(this).addClass("bk");
        $(this).siblings("div").removeClass("bk");
        $(".box").animate({marginLeft: "-60%"}, 400, function () {
            $(this).addClass("em")
        });
        $(".skills").animate({width: "12.5%"}, 400)
    });
    $(".lf").click(function () {
        $(this).addClass("bk");
        $(this).siblings("div").removeClass("bk");
        $(".box").animate({marginLeft: "0%"}, 400, function () {
            $(this).removeClass("em");
            $(".skills").animate({width: "12.5%"}, 400)
        });
    });
    var t={};
    var bbb;
    $(".skills").mouseenter(function () {
        var tl=$(this);
        if ($(".box").hasClass("em")) {
            t=setTimeout(function () {
                tl.animate({width: "42.5%"}, 400);
                tl.siblings("li:gt(2)").animate({width: "5%"}, 400);
                bbb=setTimeout(function () {
                    var detaile=tl.children(".detaile");
                    tl.children(".box-tip").animate({opacity:"0"},300);
                    tl.children(".detaile").delay(600).animate({bottom:"30"},500).css("opacity","0.8");
                    detaile.children("h1,p,span").delay(900).animate({opacity:"1"},300);
                    detaile.children("span").animate({right:"30px"},200);
                    detaile.children("h1,p").animate({left:"50px"},200);
                    detaile.children(".HTMLskill").delay(900).animate({width:"225px"},600);
                    detaile.children(".JavescriptSkill").delay(900).animate({width:"195px"},600);
                    detaile.children(".JQuerySkill").delay(900).animate({width:"210px"},600);
                    detaile.children(".BootstrapSkill").delay(900).animate({width:"225px"},600);
                    detaile.children(".AngularSkill").delay(900).animate({width:"195px"},600);
                    detaile.children(".AjaxSkill").delay(900).animate({width:"204px"},600);
                    detaile.children(".Node-js-skill").delay(900).animate({width:"195px"},600);
                    detaile.children(".Echarts-skill").delay(900).animate({width:"195px"},600);
                },300)
            },300)

        } else {
            k=setTimeout(function () {
                tl.animate({width: "42.5%"}, 400);
                tl.siblings("li:lt(5)").animate({width: "5%"}, 400);
                bbb=setTimeout(function () {
                    var detaile=tl.children(".detaile");
                    tl.children(".box-tip").animate({opacity:"0"},300);
                    tl.children(".detaile").delay(600).animate({bottom:"30"},500).css("opacity","0.8");
                    detaile.children("h1,p,span").delay(900).animate({opacity:"1"},300);
                    detaile.children("span").animate({right:"30px"},200);
                    detaile.children("h1,p").animate({left:"50px"},200);
                    detaile.children(".HTMLskill").delay(900).animate({width:"225px"},600);
                    detaile.children(".JavescriptSkill").delay(900).animate({width:"195px"},600);
                    detaile.children(".JQuerySkill").delay(900).animate({width:"210px"},600);
                    detaile.children(".BootstrapSkill").delay(900).animate({width:"225px"},600);
                    detaile.children(".AngularSkill").delay(900).animate({width:"195px"},600);
                    detaile.children(".AjaxSkill").delay(900).animate({width:"204px"},600);
                    detaile.children(".Node-js-skill").delay(900).animate({width:"195px"},600);
                    detaile.children(".Echarts-skill").delay(900).animate({width:"195px"},600);
                },300)
            },300);
        }
    }).mouseleave(function () {
        clearTimeout(k);
        clearTimeout(t);
        clearTimeout(bbb);
        var thisbox=$(this);
        var detaile=thisbox.children(".detaile");
        detaile.children("span").animate({right:"10px"},300);
        detaile.children("h1,p").animate({left:"30px"},300);
        $(this).children(".box-tip").delay(700).animate({opacity:"0.9"},300);
        detaile.animate({opacity:"0"},100).css("bottom","-300px");
        detaile.children(".HTMLskill").css({width:"0"});
        detaile.children(".JavescriptSkill").css({width:"0"});
        detaile.children(".JQuerySkill").css({width:"0"});
        detaile.children(".BootstrapSkill").css({width:"0"});
        detaile.children(".AngularSkill").css({width:"0"});
        detaile.children(".AjaxSkill").css({width:"0"});
        detaile.children(".Node-js-skill").css({width:"0"});
        detaile.children(".Echarts-skill").css({width:"0"});
    });
    $(".box").mouseleave(function () {

        $(this).children("li").delay(200).animate({width:"12.5%"},400)
    });

});
